<template>
  <div class="left_echarts" ref="echarts_left">

  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue"
const echarts_left = ref()

const init = () => {
  let myCharts1 = echarts.init(echarts_left.value);
  let option = ref({
    title: {
      text: '各项目建设单位资金使用情况',
      textStyle:{
        color:'white'
      },
      left:'30%',
    },
    tooltip: {
      trigger: "axis",
      showContent: true,
      axisPointer: {
        type: "shadow",
      },
    },
    emphasis: {
      label: {
        fontSize: 18,
        fontWeight: 600,
        color: "#F8F8FF",
        show: false,
        position: "top",
        formatter: "{c}",
      },
    },
    grid: {
      left: "1%",
      top: "15%",
      right: "0%",
      containLabel: true,
      bottom: "2%"
    },
    legend: {
      data: ["下达金额", "已支付金额"],
      top: "0",
      left: "right",
      align: 'left',
      orient: 'horizontal',
      itemGap: 25,
      lineHeight: 35,
      padding: [0, 0, 0, 0],
      formatter: function (params: any) {
        // for (let i = 0; i < names.length; i++) {
        //   if (params == names[i]) {
        //     if (params.length > 11) {
        //       var str1 = params.substring(0, 11)
        //       var str2 = params.substring(11)
        //       params = str1 + "\n" + str2
        //     }
        return params
        //   }
        // }
      },
      textStyle: {
        color: "white",
        // width:50,
        fontSize: 16,
        height: 10,

        // backgroundColor:'red',
        padding: [0, 0, 0, 10],
        lineHeight: 24,
        align: 'center',
      },
      itemStyle: {
        // backgroundColor:'red',
      },
      itemWidth: 20,
      itemHeight: 20,
      // selected: { '志愿者服务贡献价值折线（万元）': false } // 不需要显示的设置为false
    },
    xAxis: {
      data: ["A政府", "A政府", "A政府", "A政府", "A政府", "A政府", "A政府", "A政府", "A政府"],
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          type: "dashed",
          color: "#3d5269",
          width: 2,
        },
      },
      axisTick: {
        show: true, //隐藏X轴刻度
        alignWithLabel: true,
      },
      axisLabel: {
        margin: 20,
        show: true,
        textStyle: {
          color: "white", //X轴文字颜色
          fontSize: 18,
        },
        interval: 0,
        // rotate: 30
      },
    },
    yAxis: [
      {
        type: "value",
        // name: "人数",
        // nameTextStyle: {
        //   color: "#396A87",
        //   fontSize: 14
        // },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            width: 2,
            color: "#3d5269",
            opacity: 0.3,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#FFFAFA",
            fontSize: 18,
          },
        },
      },
      {
        type: "value",
        // name: "使用率%",
        nameTextStyle: {
          color: "#396A87",
          fontSize: 14,
        },
        position: "right",
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#396A87",
            width: 2,
          },
        },
        axisLabel: {
          show: false,
          formatter: "{value}", //右侧Y轴文字显示
          textStyle: {
            color: "#396A87",
            fontSize: 14,
          },
        },
      },
    ],
    series: [
      {
        // name: props.nameArryay[1]||"彩票公益金总量（万元）",
        name: "下达金额",
        type: "bar",
        barWidth: 15,
        barCategoryGap: '90%',
        // barGap:'10%',
        itemStyle: {
          normal: {
            borderWidth: 2,
            // borderColor: "rgba(84,255,159,1)",
            // background: "linear-gradient(to bottom, #8f41e9, #578aef)",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(33,68,147,0.8)",
              },
              {
                offset: 0.5,
                color: "rgba(18,35,88,0.4)",
              },
              {
                offset: 1,
                color: "rgba(4,18,68,0.4)",
              },
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(30,144,255,1)",
              },
              {
                offset: 0.5,
                color: "rgba(30,144,255,0.5)",
              },
              {
                offset: 1,
                color: "rgba(30,144,255,0.3)",
              },
            ]),
          },
        },
        label: {
          fontSize: 16,
          color: "#F8F8FF",
          show: false,
          position: 'top',
          formatter: "{c}",
          //   }
        },
        data: [5000, 4000, 5000, 3000, 6000, 4000, 8000, 3000, 6000]
      },
      {
        // name: props.nameArryay[1]||"彩票公益金总量（万元）",
        name: "已支付金额",
        type: "bar",
        barWidth: 15,
        barGap: '80%',
        itemStyle: {
          normal: {
            borderWidth: 2,
            // borderColor: "rgba(84,255,159,1)",
            // background: "linear-gradient(to bottom, #8f41e9, #578aef)",
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(84,255,159,0.6)",
              },
              {
                offset: 0.5,
                color: "rgba(78,238,148,0.4)",
              },
              {
                offset: 1,
                color: "rgba(67,205,128,0.2)",
              },
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(84,255,159,1)",
              },
              {
                offset: 0.5,
                color: "rgba(84,255,159,0.5)",
              },
              {
                offset: 1,
                color: "rgba(84,255,159,0)",
              },
            ]),
          },
        },
        label: {
          fontSize: 16,
          color: "#F8F8FF",
          show: false,
          position: 'top',
          formatter: "{c}",
          //   }
        },
        // data: [133, 23, 114],
        data: [5000, 3000, 4000, 6000, 4000, 2000, 5000, 3000, 6000]
      },
    ]
  })

  myCharts1.setOption(option.value);

  window.addEventListener("resize", function () {
    myCharts1.resize();
  });
}

onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.left_echarts {
  width: 100%;
  height: 100%;
}
</style>